<template>
  <view>
    <view
      v-if="showHeader"
      class="status"
      :style="{ position: headerPosition, top: statusTop }"
    ></view>
    <view
      v-if="showHeader"
      class="header"
      :style="{ position: headerPosition, top: headerTop }"
    >
      <view class="title">我的</view>
      <view class="addr"></view>
      <view class="input-box"> </view>
    </view>
    <!-- 占位 -->
    <view v-if="showHeader" class="place"></view>
    <!-- 用户信息 -->
    <view class="user">
      <!-- 头像 -->
      <view class="left">
        <image
          :src="userInfo.avatarUrl || '/static/img/face.jpg'"
          class="avatar"
          mode="aspectFill"
        />
      </view>
      <!-- 昵称 -->
      <view class="right">
        <view class="username" @tap="handleLogin">{{
          isLogin() ? `${user.nickName || "暂无昵称"}` : "登录/注册"
        }}</view>
      </view>
      <!-- 编辑用户信息 -->
      <view class="erweima" @tap="toPage('../../user/edit/edit')">
        <view class="icon bianji"></view>
      </view>
    </view>
    <!-- 订单-余额 -->
    <view class="order">
      <!-- 订单类型 -->
      <view class="list">
        <view
          class="box"
          v-for="(row, index) in orderList"
          :key="index"
          @tap="toOrderList(row.index)"
        >
          <view class="img">
            <view class="icon" :class="row.icon"></view>
          </view>
          <view class="text">{{ row.text }}</view>
        </view>
      </view>
    </view>
    <!-- 工具栏 -->
    <view class="toolbar">
      <view class="title">我的工具栏</view>
      <view class="list">
        <view
          class="box"
          v-for="(row, index) in mytoolbarList"
          :key="index"
          @tap="toPage(row.url)"
        >
          <view class="img">
            <image :src="row.img"></image>
          </view>
          <view class="text">{{ row.text }}</view>
        </view>
      </view>
    </view>
    <!-- 占位 -->
    <view class="place-bottom"></view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      isfirst: true,
      headerPosition: "fixed",
      headerTop: null,
      statusTop: null,
      showHeader: true,
      //个人信息,
      user: {
        username: "游客1002",
        face: "/static/img/face.jpg",
        signature: "点击昵称跳转登录/注册页",
        integral: 0,
        balance: 0,
        envelope: 0,
      },
      // 订单类型
      orderList: [
        { text: "我的订单", icon: "pingjia", index: 0 },
        { text: "待发货", icon: "fahuo", index: 1 },
        { text: "待收货", icon: "shouhuo", index: 2 },
        { text: "待付款", icon: "fukuan", index: 3 },
        { text: "退换货", icon: "tuihuo", index: 4 },
      ],
      // 工具栏列表
      mytoolbarList: [
        // {url:'../../user/keep/keep',text:'我的收藏',img:'/static/img/user/point.png'},
        // {url:'../../user/coupon/coupon',text:'优惠券',img:'/static/img/user/quan.png'},
        // {url:'',text:'新客豪礼',img:'/static/img/user/renw.png'},
        // {url:'',text:'领红包',img:'/static/img/user/momey.png'},

        {
          url: "../../user/address/address",
          text: "收货地址",
          img: "/static/img/user/addr.png",
        },
        {
          url: "../../user/export_order/export_order",
          text: "导出订单",
          img: "/static/img/user/addr.png", // 暂时使用现有图标，后续可替换为专门的导出图标
        },
        // {url:'',text:'账户安全',img:'/static/img/user/security.png'},
        // {url:'',text:'银行卡',img:'/static/img/user/bank.png'},
        // {url:'',text:'抽奖',img:'/static/img/user/choujiang.png'},
        // {text:'客服',img:'/static/img/user/kefu.png'},
        // {text:'签到',img:'/static/img/user/mingxi.png'}
      ],
    };
  },
  //下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
  onPullDownRefresh() {
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onPageScroll(e) {
    //兼容iOS端下拉时顶部漂移
    this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
    this.headerTop = e.scrollTop >= 0 ? null : 0;
    this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + "px";
  },
  onLoad() {
    this.statusHeight = 0;
    // #ifdef APP-PLUS
    this.showHeader = false;
    this.statusHeight = plus.navigator.getStatusbarHeight();
    // #endif
  },
  onReady() {
    //此处，演示,每次页面初次渲染都把登录状态重置
    uni.setStorage({
      key: "UserInfo",
      data: false,
      success: function () {},
      fail: function (e) {},
    });
  },
  onShow() {
    this.user = uni.getStorageSync("userInfo") || {};
  },
  methods: {
    toOrderList(index) {
      if (!this.isLogin()) {
        this.toLogin();
        return;
      }
      uni.setStorageSync("tbIndex", index);
      uni.navigateTo({
        url: "../../user/order_list/order_list?tbIndex=" + index,
      });
    },
    toLogin() {
      uni.showToast({ title: "请登录", icon: "none" });
      uni.navigateTo({
        // url: "../../login/login",
        url: "../../login/pre-login",
      });
      this.isfirst = false;
    },
    isLogin() {
      //实际应用中,用户登录状态应该用token等方法去维持登录状态.
      const value = uni.getStorageSync("userInfo");
      if (value) {
        return true;
      }
      return false;
    },
    handleLogin() {
      if (!this.isLogin()) {
        this.toLogin();
        return;
      }
    },
    toDeposit() {
      uni.navigateTo({
        url: "../../user/deposit/deposit",
      });
    },
    toPage(url) {
      if (!this.isLogin()) {
        this.toLogin();
        return;
      }
      if (!url) {
        uni.showToast({ title: "模板未包含此页面", icon: "none" });
        return;
      }
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>
<style lang="scss">
page {
  position: relative;
  background-color: #fff;
}
.status {
  width: 100%;
  height: 0;
  position: fixed;
  z-index: 10;
  background-color: #f06c7a;
  top: 0;
  /*  #ifdef  APP-PLUS  */
  height: var(--status-bar-height); //覆盖样式
  /*  #endif  */
}

.header {
  width: 92%;
  padding: 0 4%;
  height: 100upx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 10;
  background-color: #f06c7a;
  /*  #ifdef  APP-PLUS  */
  top: var(--status-bar-height);
  /*  #endif  */
  .icon-btn {
    width: 120upx;
    height: 60upx;
    flex-shrink: 0;
    display: flex;
    .icon {
      color: #fff;
      width: 60upx;
      height: 60upx;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 42upx;
    }
  }
  .title {
    font-size: 36upx;
    color: #fff;
  }
}
.place {
  background-color: #f06c7a;
  height: 100upx;
  /*  #ifdef  APP-PLUS  */
  margin-top: var(--status-bar-height);
  /*  #endif  */
}
.place-bottom {
  height: 300upx;
}
.user {
  width: 92%;
  padding: 0 4%;
  display: flex;
  align-items: center;
  // position: relative;
  background-color: #f06c7a;
  padding-bottom: 120upx;
  .left {
    width: 20vw;
    height: 20vw;
    flex-shrink: 0;
    margin-right: 20upx;
    border: solid 1upx #fff;
    border-radius: 100%;
    image {
      width: 20vw;
      height: 20vw;
      border-radius: 100%;
    }
  }
  .right {
    width: 100%;
    .username {
      font-size: 36upx;
      color: #fff;
    }
    .signature {
      color: #eee;
      font-size: 28upx;
    }
  }
  .erweima {
    flex-shrink: 0;
    width: 10vw;
    height: 10vw;
    margin-left: 5vw;
    border-radius: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to left, #fbbb37 0%, #fcf0d0 105%);
    .icon {
      color: #7b6335;
      font-size: 42upx;
    }
  }
}
.order {
  width: 84%;
  margin: 30upx 4% 30upx 4%;
  padding: 30upx 4% 20upx 4%;
  background-color: #fff;
  box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
  border-radius: 15upx;
  .list {
    display: flex;
    // border-bottom: solid 1upx #17e6a1;
    padding-bottom: 10upx;
    .box {
      width: 25%;
      .img {
        width: 100%;
        display: flex;
        justify-content: center;
        .icon {
          font-size: 50upx;
          color: #464646;
        }
      }
      .text {
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 28upx;
        color: #3d3d3d;
      }
    }
  }
  .balance-info {
    display: flex;
    padding: 10upx 0;
    .left {
      width: 75%;
      display: flex;
      .box {
        width: 50%;
        font-size: 28upx;

        .num {
          width: 100%;
          height: 50upx;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          color: #f9a453;
        }
        .text {
          width: 100%;
          display: flex;
          justify-content: center;
          color: #3d3d3d;
          font-size: 28upx;
        }
      }
    }
    .right {
      border-left: solid 1upx #17e6a1;
      width: 25%;
      .box {
        .img {
          width: 100%;
          height: 50upx;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          .icon {
            font-size: 45upx;
            color: #e78901;
          }
        }
        .text {
          width: 100%;
          display: flex;
          justify-content: center;
          font-size: 28upx;
          color: #3d3d3d;
        }
      }
    }
  }
}
.VIP {
  width: 84%;
  margin: -65upx auto 20upx auto;
  padding: 30upx 4%;
  background: linear-gradient(to left, #dea96d 0%, #f6d59b 100%);
  box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.2);
  border-radius: 15upx;
  display: flex;
  align-items: center;
  .img {
    flex-shrink: 0;
    width: 60upx;
    height: 60upx;
    image {
      width: 60upx;
      height: 60upx;
    }
  }
  .title {
    width: 100%;
    color: #796335;
    font-size: 30upx;
  }
  .tis {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    color: #fcf0d0;
    font-size: 26upx;
  }
}
.toolbar {
  width: 92%;
  margin: 0 4% 0 4%;
  padding: 0 0 20upx 0;
  background-color: #fff;
  box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
  border-radius: 15upx;
  .title {
    padding-top: 10upx;
    margin: 0 0 10upx 3%;
    font-size: 30upx;
    height: 80upx;
    display: flex;
    align-items: center;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    .box {
      width: 25%;
      margin-bottom: 30upx;
      .img {
        width: 23vw;
        height: 10.5vw;
        display: flex;
        justify-content: center;

        image {
          width: 9vw;
          height: 9vw;
        }
      }
      .text {
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 26upx;
        color: #3d3d3d;
      }
    }
  }
}
</style>
